<template>
  <div class="user-manager content">
    <div class="header">
      <el-form :inline="true" :model="formItem">
        <el-form-item label="商品ID">
          <el-input placeholder="请输入商品ID"></el-input>
        </el-form-item>
        <el-form-item label="用户ID" style="margin-left: 30px;">
          <el-input placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="添加时间" style="margin-left: 30px;">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 30px;" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="primary">新增商品</el-button>
      <el-button type="warning">批量上架</el-button>
      <el-button type="warning">批量下架</el-button>
      <el-button type="danger">删除商品</el-button>
    </div>
    <div class="table" style="background: #ffffff;">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#3C8DBC',color: '#fff'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="id" label="商品ID号"></el-table-column>
        <el-table-column prop="name" label="商品货号"></el-table-column>
        <el-table-column prop="email" label="用户ID"></el-table-column>
        <el-table-column prop="password" label="商品名称"></el-table-column>
        <el-table-column prop="question" label="商品类型"></el-table-column>
        <el-table-column prop="answer" label="商品库存数量"></el-table-column>
        <el-table-column prop="birthday" label="商品价格"></el-table-column>
        <el-table-column prop="address" label="供应商名称"></el-table-column>
        <el-table-column prop="loginTime" label="促销价格" width="150"></el-table-column>
        <el-table-column prop="tel" label="促销日期"></el-table-column>
        <el-table-column prop="ip" label="添加时间" width="150" align="center"></el-table-column>
        <el-table-column prop="level" label="线上图片">
          <template slot-scope="scope">
            <div class="mids">
              <img :src="scope.row.level" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" header-align="center" align="center">
          <template v-slot="scoped">
            <el-button type="primary" size="mini" plain>编辑</el-button>
            <el-button type="warning" size="mini" plain>上架</el-button>
            <el-button type="warning" size="mini" plain>下架</el-button>
            <el-button type="danger" size="mini" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; height: 50px;text-align: right;">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItem: {

      },
      tableData: [
        {id: '12323212',name: '1123303',email: '024212',password: '沙发',question: '客厅',answer: '20', birthday: '123',address: '商家',loginTime: '120',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/1.jpg')},
        {id: '34342133',name: '2131231',email: '411252',password: '茶几',question: '客厅',answer: '100', birthday: '230',address: '商家',loginTime: '220',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/2.jpg')},
        {id: '43535343',name: '3243243',email: '354420',password: '橱柜',question: '厨房',answer: '120', birthday: '410',address: '商家',loginTime: '400',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/3.jpg')},
        {id: '54243453',name: '3223233',email: '354420',password: '衣柜',question: '卧室',answer: '145', birthday: '413',address: '商家',loginTime: '400',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/4.jpg')},
        {id: '54345345',name: '3456303',email: '234454',password: '沙发',question: '客厅',answer: '20', birthday: '142',address: '商家',loginTime: '100',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/5.jpg')},
        {id: '98888544',name: '9745634',email: '234454',password: '电视柜',question: '客厅',answer: '30', birthday: '1354',address: '商家',loginTime: '1300',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/2.jpg')},
        {id: '83434534',name: '4353766',email: '455574',password: '橱柜',question: '厨房',answer: '20', birthday: '1420',address: '商家',loginTime: '1200',tel: '2022-03-12',ip: '2022-03-12', level: require('@/assets/shop/3.jpg')},
      ],
      value1: ''
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.user-manager{
  text-align: left;
  margin: 20px;
  .header{
    padding: 20px;
    background: #ffffff;
    .el-form-item{
      margin: 0;
    }
  }
  .mids{
    img{
      width: 50px;
      height: 50px;
    }
  }
  .table{
    margin-top: 20px;
  }
}
</style>